import { useCallback } from 'react';
import { Upload, Image } from '@douyinfe/semi-ui';
import { UPLOAD_CONFIG } from '../constants';
import add from "@/assets/images/imageEdit/add.svg";
import styles from '../index.module.scss';

/**
 * 参考图区域组件
 * @param {Object} props

 * @param {Function} props.onUpload - 上传处理函数
 * @param {Function} props.onHistoryClick - 历史文件点击处理
 * @param {Object} props.imgObj - 图片对象
 */
function ReferenceImageSection({ 
  onUpload, 
  onHistoryClick, 
  imgObj 
}) {
  const handleCustomRequest = useCallback(({ file }) => {
    onUpload({ file, uploadKey: 'diagram' });
  }, [onUpload]);

  const handleHistoryClick = useCallback((e) => {
    onHistoryClick(e);
  }, [onHistoryClick]);

  const imageKey = `layer_diagram`;
  const hasImage = imgObj[imageKey];

  return (
    <>
      <div className={`${styles.titleSection} ${styles.titleSectionMargin}`}>
        参考图
      </div>
      <div className={`${styles.area} ${styles.referenceImageArea}`}>
        <Upload 
          {...UPLOAD_CONFIG} 
          className={styles.uploadSection} 
          customRequest={handleCustomRequest}
        >
          {hasImage ? (
            <Image
              style={{ width: '100%', height: '100%' }}
              src={hasImage}
              preview={false}
              draggable={false}
            />
          ) : (
            <div className={styles.uploadPlaceholder}>
              <Image
                src={add}
                preview={false}
                className={styles.uploadIcon}
                draggable={false}
              />
              <div className={styles.uploadText}>
                从<span onClick={handleHistoryClick}>「历史文件」</span>上传
              </div>
            </div>
          )}
        </Upload>
      </div>
    </>
  );
}

export default ReferenceImageSection;